<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar left-icon="back" statusBar :border="false" shadow @clickLeft="goBack">
			<view class="flex align-center justify-center w-100 font-md">
				所有人可见 <text class="iconfont icon-shezhi font-md px-1"></text>
			</view>
		</uni-nav-bar>

		<!-- 文本编辑区域 -->
		<textarea v-model="content" placeholder="请写下你的贴子" class="uni-textarea px-2"></textarea>

		<!-- 多图上传 -->
		<upload-image @change="changeImage" ref="uploadImage" :list="imageList" :show="show"></upload-image>


		<!-- 底部功能条 -->
		<view class="fixed-bottom flex align-center" style="height: 90rpx;">
			<view class="iconfont icon-caidan footer-btn" hover-class="animate__animated animate__jello"></view>
			<view class="iconfont icon-huati footer-btn" hover-class="animate__animated animate__jello"></view>
			<view class="iconfont icon-tupian footer-btn " hover-class="animate__animated animate__jello"
				@click="iconClickEvent('uploadImage')"></view>

			<!-- 发送按钮 -->
			<view class="bg-main flex justify-center align-center text-white rounded ml-auto "
				style="width: 140rpx;height: 60rpx; margin-right: 10rpx;"
				hover-class="animate__animated animate__jello">发送</view>
		</view>

	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import uploadImage from "@/components/common/upload-image.vue"
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		data() {
			return {
				//用户帖子的文字
				content: '',
				//用户上传的图片
				imageList: [],
				//是否已经弹出提示框  开关值  立 Flag
				showBack: false
			};
		},
		computed: {
			show() {
				return this.imageList.length > 0
			}
		},
		//监听返回，防止误触
		onBackPress() {
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					content: '是否要保存成草稿？',
					showCancel: true,
					cancelText: '不保存',
					confirmText: '保存',
					success: (res) => {
						//点击保存之后
						if (res.confirm) {
							// console.log('已经保存了');
							this.store()
						} else {
							//点击取消
							uni.removeStorage({
								key: "add-input"
							})
						}
						//手动执行返回
						uni.navigateBack({
							delta: 1
						})
					}
				})
				this.showBack = true
				return true
			}
		},
		//页面加载时  还原之前缓存的数据
		onLoad() {
			// uni.getStorage({
			// 	key: 'add-input',
			// 	success: (res) => {
			// 		// console.log(res);
			// 		//解读res对象
			// 		if (res.data) {
			// 			let result = JSON.parse(res.data)
			// 			console.log(result);
			// 			this.content = result.content
			// 			this.imageList = result.imageList
			// 		}
			// 	}
			// })

			//同步获取数据
			const res = uni.getStorageSync('add-input')
			const result = JSON.parse(res)
			console.log(result); //打印
			this.content = result.content
			this.imageList = result.imageList
		},
		methods: {
			//底部图标按钮点击事件
			iconClickEvent(e) {
				switch (e) {
					case 'uploadImage':
						this.$refs.uploadImage.chooseImage()
						break
				}
			},
			//store() 保存操作
			store() {
				//缓存到本地 需要同步方法
				// uni.setStorage({
				// 	key: 'add-input',
				// 	data: JSON.stringify({
				// 		content: this.content,
				// 		imageList: this.imageList
				// 	})
				// })
				let obj = {
					content: this.content,
					imageList: this.imageList
				}
				uni.setStorageSync('add-input', JSON.stringify(obj))
			},
			//点击导航栏 返回图标（假）返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选中图片
			changeImage(e) {
				// console.log('执行了没？');
				// console.log(e);
				this.imageList = e
			}
		}
	}
</script>

<style lang="scss">
	.footer-btn {
		width: 85rpx;
		height: 85rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
	}
</style>